<template>
	<view class="container">
		<view class="info-box primary-bg">
			<view open-type="getUserInfo" class="avatar">
				<open-data type='userAvatarUrl' class="userinfo" mode="cover"></open-data>
			</view>
			<view class="user-info">
				<view class="username text-white">微信用户</view>
				<view v-if="phone" class="tips-txt" open-type="getPhoneNumber" type="primary">{{phone}}</view>
				<view v-else class="auth-box">
					<view class="btn-group" style="margin-left: -24rpx;">
						<button class="tips-txt" style="background: #000000;text-align: left;margin-right: 20rpx" open-type="getPhoneNumber" type="primary" @getphonenumber="getPhoneNumber">授权手机号</button>
					</view>
				</view>
			</view>
		</view>

		<view class="list-container">
			<button class="primary-bg i-list-item"  @click="addEx">
				<text class="i-title">新增</text>
				<view class="i-icon i-icon-arrow-r" style="margin-right: 56upx;margin-top: -42upx;">›</view>
			</button>
		</view>
		<view class="card" v-for="item in recordList">
			<view class="right">
				<view class="name">名称：{{item.phone}}</view>
				<view style="width: 100%;margin-left: 2%;">
					<view style="" class="intro">地址：{{item.address}}</view>
					<view class="intro">联系手机：{{item.contactPhone}}</view>
				</view>
			</view>
			<view class="card2">
				<button style="background-color: #d0d3d6;color: #6883ff;" class="button" @click="deleteR(item)">
					删除
				</button>
				<button style="margin-top: 15rpx" class="button" @click="addInfo(item.id)">
					查看详情 >
				</button>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
		<u-modal :show="show"
				 @confirm="confirm"
				 @cancel="cancel"
				 confirmText="家装"
				 confirmColor="#ff5722"
				 cancelText="装修"
				 cancelColor="#0b8ac3"
				 showCancelButton="true"
				 buttonReverse="true"
				 :title="title"
				 :content='content'>

		</u-modal>
	</view>
</template>

<script>
	export default {
		onShareAppMessage() {
			return {
				title: '赐丰订单',
				path: '/pages/index/index',
				imageUrl: '/static/ewm.jpg'
			}
		},
		data() {
			return {
				show:false,
				type: null,
				title:'请选择用户类型',
				isLogin: false,
				phone: null,
				recordList: null,
			}
		},
		// onShow(){
		// 	this.getList()
		// },
		onShow() {
			const typeObj = uni.getStorageSync('type');
			if (typeObj && typeObj.value) {
				// 判断缓存是否过期
				var now = new Date().getTime();
				if (now < typeObj.expire) {
					this.type = typeObj.value;
					this.show = false;
				} else {
					// 缓存过期，清空本地缓存
					this.type = null;
					this.show = true;
					uni.removeStorageSync('type');
				}
			}else{
				// 缓存过期，清空本地缓存
				this.type = null;
				this.show = true;
			}
			const phoneObj = uni.getStorageSync('phone');
			if (phoneObj && phoneObj.value) {
				// 判断缓存是否过期
				var now = new Date().getTime();
				if (now < phoneObj.expire) {
					this.phone = phoneObj.value;
					this.isLogin = true;
				} else {
                    // 缓存过期，清空本地缓存
                    this.phone = null;
                    uni.removeStorageSync('phone');
                    this.isLogin = false;
				}
			}else{
                // 缓存过期，清空本地缓存
                this.phone = null;
                this.isLogin = false;
            }
			this.getList()
		},
		methods: {
			confirm() {
				console.log("家装")
				this.type = "家装"
				var now = new Date().getTime();
				var expire = now + 30 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
				uni.setStorageSync('type', {
					value: "家装",
					expire: expire
				});
				this.show = false;
			},
			cancel() {
				console.log("装修")
				this.type = "装修"
				var now = new Date().getTime();
				var expire = now + 30 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
				uni.setStorageSync('type', {
					value: "装修",
					expire: expire
				});
				this.show = false;
			},
			addEx(){
			    if(this.isLogin){
                    uni.navigateTo({
                        url: '/pages/info/index',
                        animationType: 'pop-in',
                        animationDuration: 300
                    })
                }else{
                    uni.$u.toast('请先授权手机号码')
                }
			},
			//页面跳转
			addInfo(rId){
				uni.navigateTo({
					url: '/pages/info/index2?exId='+rId,
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			deleteR(item){
				var that = this
				uni.request({
					data: item,
					method: 'POST',
					url: that.bash + '/fApi/record/delete',
					success: res => {
						if(res.data.code == 200){
							that.getList()
							uni.$u.toast('操作成功')
						}
					}
				})
			},
			getList() {
				var that = this
				uni.request({
					data: {
						phone: that.phone
					},
					method: 'GET',
					url: that.bash + '/fApi/record/list',
					success: res => {
						if(res.data.code == 200){
							that.recordList = res.data.data
							if(that.recordList.length>0){
								var now = new Date().getTime();
								var expire = now + 360 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
								uni.setStorageSync('address', {
									value: that.recordList[0].address,
									expire: expire
								});
							}

						}
					}
				})

			},
			getPhoneNumber(e) {
				var that = this
				let phoneCode = e.detail.code
				if (!e.detail.code) {
					uni.showModal({
						title: '授权失败',
						content: '您已拒绝获取绑定手机号登录授权，可以使用其他手机号验证登录',
						cancelText: '知道了',
						showCancel: false, // 是否显示取消按钮，默认为 true
						confirmText: '知道了',
						confirmColor: '#3C9CFFFF',
						success: res => {
							if (res.confirm) {
                                uni.removeStorageSync('phone');
                                uni.removeStorageSync('address');
                                that.phone = null;
                                that.address = null;
								that.isLogin = false;
								// uni.$u.route('/pages/login/mobile')
							} else if (res.cancel) {
                                uni.removeStorageSync('phone');
                                uni.removeStorageSync('address');
                                that.phone = null;
                                that.address = null;
								that.isLogin = false;
								//console.log('用户点击取消')
							}
						}
					})
				} else {
					uni.login({
						provider: 'weixin',
						success: res => {
							console.log(res)
							uni.request({
								data: {
									phoneCode: phoneCode,
									loginCode: res.code
								},
								method: 'POST',
								url: that.bash + '/fApi/wxuser/wxlogin',
								success: res => {
									if(res.data.code == 200){
										uni.$u.toast('获取成功')
										// 绑定成功后将手机号存储到本地缓存
										var phone = res.data.msg; // 获取到的手机号
										var now = new Date().getTime();
										var expire = now + 30 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
										uni.setStorageSync('phone', {
											value: phone,
											expire: expire
										});
										that.phone = res.data.msg;
										that.isLogin = true;
										that.getList();
									}
									else{
                                        uni.removeStorageSync('phone');
                                        uni.removeStorageSync('address');
                                        that.phone = null;
                                        that.address = null;
										that.isLogin = false;
										uni.$u.toast('获取失败')
									}
								}
							})
						}
					})
				}
			},
		}
	}
</script>

<style>
	page {
		background: #e4e3e6;
		color: #090909;
	}
</style>
<style scoped lang="less">
	.container {
		.info-box {
			border-bottom: 2px solid #ffffff;
			height: 150upx;
			margin: 20upx 0;
			padding-left: 20upx;
			display: flex;
			.avatar {
				margin: 0;
				padding: 0;
				background: none;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-right: 20upx;
				.userinfo{
					width:100upx;
					height: 100upx;
					border-radius: 50%;
					display:flex;
					overflow: hidden;
				}
			}
			.user-info {
				height: 80upx;
				display: flex;
				flex-direction: column;
				.username {
					margin-top: 34upx;
					margin-bottom: 14upx;
				}
				.tips-txt{
					font-size: 20upx;
				}
			}
		}

		.list-container {
			border-bottom: 2px solid #ffffff;
			.i-list-item {
				display: flex;
				align-items: center;
				padding-left: 40upx;
				background: #863e3e;
				border-bottom: 2px solid #ffffff;
				&:last-child {
					border-bottom: none;
				}
			}
			.i-icon {
				width: 40upx;
				height: 40upx;
				margin-right: 50upx;
				&.i-icon-arrow-r {
					flex: 1;
					text-align: right;
					color: #ffffff;
					/*font-size: 40upx;*/
					margin-right: 80upx;
					font-weight: bold;
				}
			}
			.i-title {
				color: #ffffff;
				font-size: 32upx;
			}
		}
	}
</style>

<style scoped>
	.card {
		margin-top: 20rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 2rpx;
		box-shadow: 0 1rpx 10rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}
	.card2 {
		/*margin-bottom: 10rpx;*/
		/*display: flex;*/
		padding: 3rpx;
	}
	.right {
		flex: 1;
		margin-left: 50rpx;
		margin-top: -30rpx;
	}
	.name {
		color: #999;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 30rpx;
	}

	.intro {
		font-size: 25rpx;
		color: #999;
		margin-top: 10rpx;
	}


	.button {
		margin-right: 10rpx;
		width: 100px;
		height: 30px;
		background-color: #007aff;
		color: #fff;
		font-size: 23rpx;
	}
</style>